<app-content-header
  [action]="aclService.canAbility('api.put.camel.user.one.password') &&action"
  [actionBgColor]="'#FFAE00'"
  (actionClick)="goEditPassword()"
>
  <ng-template #action>
    <i nz-icon type="unlock"></i> {{'USER.UPDATE_PASSWORD' | i18n}}
  </ng-template>
</app-content-header>

<app-detail-header
  *ngIf="!loading"
  [title]="'GENERAL.INFO.BASIC' | i18n"
  (edit)="triggerBaseEdit()"
  (cancel)="cancelBase()"
  (save)="saveBase()"
  [hideIcon]="!aclService.canAbility('api.put.camel.user.one')"></app-detail-header>

<nz-spin [nzSpinning]="loading"></nz-spin>

<app-base-info
  *ngIf="!loading"
  [imgSrc]="imgSrc"
  [(firstColumns)]="firstColumns"
  [(secondColumns)]="secondColumns"
></app-base-info>

<app-detail-header
  *ngIf="!loading && detailData && detailData.userType !== 'admin'"
  [title]="'GENERAL.INFO.OTHER' | i18n"
  [ifEditable]="false"
  [tabs]="tabs"
  class="cil__scroll-div"
></app-detail-header>

<router-outlet *ngIf="!loading && detailData && detailData.userType !== 'admin'"></router-outlet>
<ng-template #tpControl>
  <div class="btn-groups">
    <button
      acl [acl-ability]="'api.delete.camel.user.one'"
      class="custom-btn ng-star-inserted" (click)="deleteUserDialog()">
      <i nz-icon [nzIconfont]="'icon-delete-twotone'"></i>
    </button>
    <span class="btn-separator" *ngIf="hasBtnSeparator()">|</span>
    <button
      acl [acl-ability]="'api.put.camel.user.one.unfreeze'"
      class="custom-btn ng-star-inserted" (click)="unfreezeUserDialog()"
      *ngIf="detailData.status === 'freeze'; else unfreeze">
      <i nz-icon [nzIconfont]="'icon-unlock'"></i>
    </button>
    <ng-template #unfreeze>
      <button
        acl [acl-ability]="'api.put.camel.user.one.freeze'"
        class="custom-btn ng-star-inserted" (click)="freezeUserDialog()">
        <i nz-icon [nzIconfont]="'icon-lock-square'"></i>
      </button>
    </ng-template>
  </div>
</ng-template>

<ng-template #tpUserRoles>
  <nz-select name="userRole" style="width: 100%;" [(ngModel)]="detailData.roles[0]" [compareWith]="userRoleCompareFn">
    <nz-option *ngFor="let role of userRoles$ | async" [nzLabel]="role.roleName" [nzValue]="role"></nz-option>
  </nz-select>
</ng-template>
